/*
 * @Description: 切换车票类型组建
 * @Author: shuaishuai.wang
 * @Date: 2019-08-21 09:39:51
 * @Last Modified by: shuaishuai.wang
 * @Last Modified time: 2019-08-23 16:49:18
 */
<template>
  <div class="type_area">
    <div class="type_title flex-h">
      <div
        v-for="(name, index) in  nameList"
        :key="index"
        class="type_name fontsize32"
        :class="typeIndex === index ? 'selected_type' : ''"
        @click="changeType(index)"
      >{{name}}</div>
      <div class="type_bg"></div>
    </div>
    <choose-time ref="chooseTime"></choose-time>
  </div>
</template>

<script>
import { setTimeout } from 'timers'
export default {
  data () {
    return {
      nameList: ['次票', '周票', '月票'], //  车票类型
      typeIndex: 0 // 车票类型下标
    }
  },
  methods: {
    changeType (num) { // 切换车票类型
      let option = this.$refs.chooseTime.stateOption
      if ((!option.mask || option.index > 0) && this.typeIndex !== num) { // 下方数据加载时或切换类型就是当前类型时不可切换车票类型，其他情况可切换类型
        option.mask = true
        option.index = 0
        this.$refs.chooseTime.chooseIndex = -1
        this.$refs.chooseTime.getThisTimeData(0)
        this.typeIndex = num
        let bg = document.querySelector('.type_bg')
        let bgWidth = bg.clientWidth
        bg.style.left = num * bgWidth + 'px'
        setTimeout(() => {
          option.mask = true
          option.index = 1
        }, 1000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.type_area {
  .type_title {
    width: 686px;
    height: 68px;
    margin: auto;
    background-color: #f0f4fd;
    border-radius: 25px; /*no*/
    position: relative;
    .type_name {
      width: 100%;
      height: 68px;
      line-height: 68px;
      text-align: center;
      border-radius: 25px; /*no*/
      position: relative;
      z-index: 1;
      transition: all 0.5s;
      color: #027aff;
    }
    .selected_type {
      color: #fff;
    }
    .type_bg {
      width: calc(100% / 3);
      height: 68px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #027aff;
      border-radius: 25px; /*no*/
      transition: all 0.5s;
    }
  }
}
</style>
